<template>
  <div class="order-box">
    <nav-bar class="nav-bar">
      <template v-slot:default>
        定单列表
      </template>
    </nav-bar>

    <van-tabs ref="tabs" @click="onChangeTab"  class="order-tab">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="已支付"></van-tab>
      <van-tab title="发货"></van-tab>
      <van-tab title="交易完成"></van-tab>
      <van-tab title="过期"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            @offset="10"
        >
          <div @click="goTo(item.id)" class="order-item-box" v-for="(item, index) in list" :key="index">
            <div class="order-item-header">
              <span style="line-height:30px;">订单号：{{item.order_no}} <br> 创建时间：{{item.created_at}}</span>
            </div>
            <van-card
                v-for="sub in item.orderDetails.data"
                :key="sub.id"
                :num="sub.num"
                :price="sub.goods.price"
                desc="全场包邮"
                :title="sub.goods.title"
                :thumb="sub.goods.cover_url"
            />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { reactive,ref, toRefs,onMounted } from 'vue';
import NavBar from "components/common/navbar/NavBar";
import { getOrderList } from 'network/order'
import { useRouter,useRoute } from 'vue-router';


export default {
  name: 'Order',
  components: {
    NavBar
  },
  setup() {
    /*
    List 组件通过 loading 和 finished 两个变量控制加载状态，
    当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
    此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
    若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
     */

    const router = useRouter()
    const route = useRoute()
    let tabs = ref(null);
    const state = reactive({
      loading: false,
      finished: false,
      refreshing: false,
      list:[],
      page:1,
      totalPage:0,
      status:0,
    })

    onMounted(()=>{
      onRefresh();  // 初使化
    })


    const  loadData = ()=>{
      getOrderList({page:state.page, status:state.status, include:'orderDetails.goods'}).then(res=>{
        state.list = state.list.concat(res.data);
        state.loading = false;

        console.log(state.page+"################");

        state.totalPage = res.meta.pagination.total_pages;

        if(state.page >= state.totalPage) {
          state.finished = true;
        }
      })
    }


    const onLoad = () => {

      if(!state.refreshing && state.page < state.totalPage) {
        state.page = state.page + 1;
      }


      if(state.refreshing) {
        state.list = [];
        state.refreshing = false;
      }

      loadData();
    }

    const onRefresh = () => {
      // 是否处于加载状态，加载过程中不触发load事件
      state.refreshing = true
      // 清空列表数据
      state.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true

      state.page = 1;

      onLoad()
    }

    // tab 切换
    const onChangeTab = (name) => {
      state.status = name;
      onRefresh();
    }

    // 到订单详情页
    const goTo = (id)=>{
      router.push({path:'/orderdetail', query:{id}});
    }

    return {
      ...toRefs(state),
      onLoad,
      onRefresh,
      tabs,
      onChangeTab,
      goTo
    }
  }
}
</script>

<style lang="scss" scoped>


.order-box {
  text-align: left;
  .order-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width:100%;
    height:44px;
    line-height: 44px;
    padding: 0 10px;
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    .order-name {
      font-size: 14px;
    }
  }
  .order-tab {
    margin-top: 44px;
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
  }


  .content {
    height:100vh;
    overflow: hidden;
    overflow-y: scroll;
    padding-top: 100px;

  }
  .order-list-refresh {
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-pull-refresh__head {
      background: #f9f9f9;
    }

    .order-item-box {
      margin: 20px 10px;
      background-color: #FAFAFA;
      .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
      }
      .van-card {
        background-color: #FFFFFF;
        border-radius: 3px;
        margin-top: 10px;
      }
    }
  }
}
</style>
